<template>
	<view class="content">
		<p class="title">编辑店铺信息</p>
		<view class="avatar-container">
			<button class="avatar-wrapper" @click="chooseImage">
				<image class="avatar" :src='storeInfo.image'></image>
				<image class="upAvatar"
					src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/wisdomClubApp/upAvatar.png" mode="">
				</image>
			</button>
		</view>
		<view class="information">
			<form @submit.prevent="submitForm">
				<view class="informationForm">
					<p class="leftTitle">店铺名称</p>
					<input class="rightInput" v-model="storeInfo.storeName" type="text" placeholder="请输入店铺名称" />
				</view>
				<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				<view class="informationForm">
					<p class="leftTitle">到期时间</p>
					<input class="rightInput" :disabled="true" v-model="storeInfo.updateTime" type="text"
						placeholder="请输入到期时间" />
				</view>
				<view style="height: 1rpx;background-color:#DDDDDD;"></view>
				<view class="bottomButton">
					<button formType="submit" class="submit-button01">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import {
		getStoreInfo,
		putStoreInfo
	} from '@/api/business.js';
	import uploadImage from '@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js';

	export default {
		components: {},
		data() {
			return {
				userInfo: {},
				storeInfo: {},
				sexOptions: [{
						name: '未知',
						value: '0'
					},
					{
						name: '男',
						value: '1'
					},
					{
						name: '女',
						value: '2'
					}
				],
			};
		},
		onLoad() {
			this.getUserDetail()
		},
		methods: {
			getUserDetail() {
				getUserInfo().then((res) => {
					this.userInfo = res.data;
					this.getStoreDetail(this.userInfo.msqStore.id);
				});
			},
			getStoreDetail(id) {
				getStoreInfo(id).then(res => {
					this.storeInfo = res.data;
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.uploadImage(tempFilePath);
					},
					fail: (err) => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			uploadImage(filePath) {
				uploadImage(filePath, 'avatars/', (url) => {
					this.storeInfo.image = url;
					console.log(url, "url")
					uni.showToast({
						title: '头像上传成功',
					});
				}, (error) => {
					uni.showToast({
						title: '头像上传失败: ' + error.message,
					});
				});
			},
			//提交
			submitForm() {
				if (!this.storeInfo.storeName || !this.storeInfo.image) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				const form = {
					id: this.storeInfo.id,
					image: this.storeInfo.image,
					storeName: this.storeInfo.storeName,
				}
				putStoreInfo(form).then(() => {
					uni.showToast({
						title: '信息更新成功',
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/business/index'
						});
					}, 1000)
				}).catch((error) => {
					uni.showToast({
						title: '信息更新失败',
					});
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		min-height: 100vh;
		background-color: #fff;
	}

	.title {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 42rpx;
		color: #333333;
		line-height: 106rpx;
		margin-left: 20rpx;
	}

	.avatar-wrapper {
		padding-left: 0;
		padding-right: 0;
		height: 164rpx;
		line-height: 50rpx;
		background-color: transparent;
		border-color: transparent;
	}

	.avatar-wrapper::after {
		border: none;
	}

	.avatar-container {
		position: relative;
		margin: 60rpx auto;
		width: 164rpx;
		height: 164rpx;
	}

	.avatar {
		width: 100%;
		height: 100%;
		border-radius: 50%;

		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.upAvatar {
		position: absolute;
		bottom: 4rpx;
		right: 4rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.information {
		width: 700rpx;
		min-height: 420rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: auto;
		padding: 32rpx 24rpx 32rpx 24rpx;

		.informationForm {
			height: 87rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;

			.leftTitle {
				width: 197rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				font-weight: 600;
				line-height: 87rpx;
				text-align: left;
				font-style: normal;
			}

			.rightInput {
				width: 480rpx;
				height: 87rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #000;
				line-height: 87rpx;
				text-align: right;
				font-style: normal;
			}
		}

		.bottomButton {
			margin-top: 300rpx;

			.submit-button01 {
				width: 625rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
				margin: 30rpx auto 20rpx auto;
				color: #fff;
				text-align: center;
				background-color: #1D85E1;
			}

			.submit-button02 {
				width: 625rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 80rpx;
				margin: 30rpx auto 20rpx auto;
				color: #1D85E1;
				text-align: center;
				border: 2rpx solid #000;
			}
		}

	}
</style>